<template>
  <view class="index-container">
    <!-- 图片 -->
    <image :src="type === 'course' ? detail.cover : detail.avatar" mode="widthFix" />
    <!-- 内容区 -->
    <view class="content">
      <view class="title">{{ type === 'course' ? detail.title : null }}</view>
      <block class="price-buy flex" v-if="type == 'course'">
        <view class="mid">{{ detail.lessonNum }} 已学习</view>
        <view class="price">¥{{ detail.price }}</view>
        <view class="buy">{{ detail.buyCount }}已购买</view>
      </block>

      <block v-else>
        <view class="desc">{{ detail.career }}</view>
        <view class="name">{{ detail.name }}</view>
      </block>
    </view>

  </view>
</template>

<script setup lang="ts">
defineProps(['detail', 'type'])








</script>

<style scoped lang="less">
.index-container {
  background: #eeeeee;

  margin-top: 20rpx;
  width: 335rpx;

  image {
    width: 100%;
  }

  .content {
    // background: #eeeeee;
  }

  .title {
    color: #000;
    font-weight: bold;
    font-size: 28rpx;
  }

  .mid {
    color: #000;
    font-size: 28rpx;
    padding: 10rpx;
  }

  .price {
    color: #f00;
    font-size: 26rpx;
    margin: 0 10rpx 0 0;
  }

  .buy {
    color: #000;
    font: 26rpx;
  }

  .desc {
    font-size: 25rpx;
    white-space: pre-wrap;
    margin: 0 10rpx 0 0;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .name {
    color: #0dce9e;
    font: 26rpx;
  }
}
</style>